import {
  colorList
} from '@/utils/constMapList';
export default class RadarBase {
    constructor(data) {
      this.data = data;
      return  this.getChartConfig()
    }
    //获取series数据
    getSeriesData(){
      return this.data?.data?.map((item,index)=>{
        return {
          ...item,
          areaStyle: {
            color: colorList[index],
            //透明度
            opacity: 0.1,
          },
        }
      })
    }
    //获取
    getIndicator() {
      //最大值
      const max = Math.max(...this.data?.data?.map(item => Math.max(...item.value)),2);
      return this.data?.xaxis.map((item) => {return {name: item,max}})
    }
    getChartConfig() {
      return {
        color: colorList,
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(130,174,255,0.2)',
          borderWidth: 0,
          className: 'tooltip-back-bar',
          textStyle: {
            color: ' #E8F3FF',
            fontSize: 'w(12)',
            fontFamily: 'Source Han Sans CN-Bold, Source Han Sans CN',
            fontWeight: 'bold',
          },
          axisPointer: {
            lineStyle: {
              type: 'solid',
              color: 'rgba(54, 134, 255, 1)',
            },
          },
        },
        legend: {
          selectedMode: true,
          type: 'scroll',
          itemWidth: 'w(10)',
          itemHeight: 'w(10)',
          borderRadius: 'w(2)',
          icon: 'roundRect',
          y: 'center',
          left: '70%',
          height: this.data?.data?.length >= 9 ? '90%' : '100%',
          width: '100%',
          orient: 'vertical',
          align: 'auto',
          itemGap: 'h(21)',
          textStyle: {
            fontSize: 'w(19)',
            color: '#C3CED5',
            fontFamily: 'font-family: Source Han Sans CN-Regular, Source Han Sans CN',
            rich: {
              name: {
                verticalAlign: 'right',
                align: 'left',
                width: 'w(80)',
                height: 'h(20)',
                fontSize: 'w(14)',
                color: '#C3CED5',
              },
            },
          },
          pageTextStyle: {
            color: '#C3CED5',
          },
          pageButtonItemGap: 'w(20)',
          pageButtonGap: 'w(10)',
          pageButtonPosition: 'end',
          pageIcons: {
            vertical: [
              'image://',
              'image://',
          ],
          },
          formatter: function (name) {
            return '{name| ' + name + '}';
          },
        },
        radar: [
          {
            indicator: this.getIndicator(),
            center: ['30%', '50%'],
            radius: 'w(100)',
            splitNumber: '4',
            axisName: {
              formatter: '{value}',
              fontFamily:'PingFang SC-Regular',
              color: 'rgba(255,255,255,0.85)',
              fontSize:'w(14)',
              // height: 'h(10)',
              // padding: [0, 0, 'w(-9)', 0],
            },
            splitArea: {
              areaStyle: {
                color: [
                  'RGBA(31, 49, 88, .4)',
                  'RGBA(31, 49, 88, .6)',
                  'RGBA(42, 59, 96, .7)',
                  'RGBA(31, 49, 88, .8)',
                ],
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 'w(10)',
              },
            },
            axisLine: {
              lineStyle: {
                color: 'RGBA(43, 61, 97, 1)',
              },
            },
            splitLine: {
              lineStyle: {
                color: 'RGBA(43, 61, 97, 1)',
              },
            },
          },
        ],
        series: [
          {
            type: 'radar',
            emphasis: {
              lineStyle: {
                width: 'w(4)',
              },
            },
            symbolSize: 0,
            data: this.getSeriesData(),
            // [
            //   {
            //     value: [200, 210, 110, 240, 120, 210],
            //     name: '小型车',
            //     // areaStyle: {
            //     //   color: 'rgba(54, 134, 255, .2)',
            //     // },
            //   },
            //   {
            //     value: [60, null, 80, 100, 150, 120, 190],
            //     name: '公交车',
            //     // areaStyle: {
            //     //   color: 'rgba(83, 240, 146, .2)',
            //     // },
            //   },
            //   {
            //     value: [20, 35, 50, 100, 60, 80],
            //     name: '渣土车',
            //     // areaStyle: {
            //     //   color: 'rgba(238, 111, 124, .2)',
            //     // },
            //   },
            //   {
            //     value: [140, 75, 10, 100, 150, 200],
            //     name: '大型车-其他',
            //     // areaStyle: {
            //     //   color: 'rgba(95, 213, 236, .2)',
            //     // },
            //   },
            // ],
            tooltip: {
              trigger: 'item',
            },
          },
        ],
      };
    }
  }
  